<script lang="ts" setup>
import { onMounted,ref, shallowReactive } from 'vue'
import { uuid } from './../function/index'
// data-tauri-drag-region 
import {appWindow,currentMonitor,Monitor} from '@tauri-apps/api/window'
import { invoke } from '@tauri-apps/api/tauri';
import { writeText } from "@tauri-apps/api/clipboard"
appWindow.setDecorations(false);

const left = ref<number>(0);
const top = ref<number>(0);

const monitor = ref<any>();
currentMonitor().then((res)=>{
  monitor.value = res as any
});

const bgra = ref<any>([0,0,0,1]);

const click =async function(e:any){
  left.value = e.screenX;
  top.value = e.screenY;
  bgra.value = await invoke('getcolor',{
    left:Math.trunc(left.value*monitor.value.scaleFactor),
    top:Math.trunc(top.value*monitor.value.scaleFactor),
    width:1,
    height:1,
  });
  await writeText('rgba('+bgra.value[2]+','+bgra.value[1]+','+bgra.value[0]+','+bgra.value[3]+')');
  appWindow.close();
}

</script>

<template>
  <div class="getcolor" @click="click">
    <!-- <div class="bgcolor" :style="{background:'rgba('+bgra[2]+','+bgra[1]+','+bgra[0]+',1)'}">
    </div> -->
  </div>
</template>

<style>
.getcolor{
    width: 100vw;
    height: 100vh;
    background: transparent !important;
    position: relative;
    cursor: crosshair;
}

.bgcolor{
  width: 100px;
  height: 100px;
}

</style>